<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    
  </style>
</head>
<body>
  <input type="text" class="username"><br>
  <input type="text" class="password"><br>
  <input type="button" value="登录" class="btn">

  <table border="1" width="600">
    <thead>
      <tr>
        <th>姓名</th>
        <th>手机号</th>
        <th>部门编号</th>
        <th>权限</th>
        <th>注册时间</th>
      </tr>
    </thead>
    <tbody>
    </tbody>
  </table>
</body>
<script src="./js/get.js"></script>
<script>
  // 选项器
  const loginUrl = "http://10.11.55.86:3000/login";
  const getUserUrl = "http://10.11.55.86:3000/getuser";

  // 1. 初始获取用户信息;
  getUser();
  // 2. 点击登录按钮
  $(".btn").onclick = function(){
    // 3. 发起登录请求
    ajaxGet({
      url: loginUrl,
      data: {
        username: $(".username").value,
        password: $(".password").value
      },
      success(xhr){
        // 解析数据
        const res = JSON.parse(xhr.responseText);
        // 判断是否登录成功
        if(res.code === 0){
          // 4. 将登录成功后的用户信息存到本地存储中
          localStorage.setItem("userData", JSON.stringify(res.data));

          // 5. 获取用户信息
          getUser();
        }
      }
    })
  }
  
  // 获取用户信息功能
  function getUser(){
    // 初始获取本地存储中可能存在的用户信息中的token
    const userData = JSON.parse(localStorage.getItem("userData")) || {};
    const token = userData.token;
    // 发起获取用户信息请求
    ajaxGet({
      url: getUserUrl,
      data: { token },
      success(xhr){
        // 解析数据
        const res = JSON.parse(xhr.responseText);
        // 拼接页面结构
        let str = "";
        res.data.forEach(val=>{
          str += `<tr>
                    <td>${val.uName}</td>
                    <td>${val.tel}</td>
                    <td>${val.tId}</td>
                    <td>${val.power}</td>
                    <td>${new Date(val.joinTime).toLocaleDateString()}</td>
                  </tr>`;
        })
        // 设置到指定视图
        $("tbody").innerHTML = str;
      }
    })
  }


  function $(s){
    return document.querySelector(s)
  }
</script>
</html>